<!--
 * Description: 喷漆表格
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/09/28 9:57
-->

<template>
  <div class="paint-capacity">
    <div class="top-btn">
      <el-link
        icon="el-icon-circle-plus-outline"
        style="padding-bottom: 10px"
        type="success"
        @click="handlerClick"
      >
        {{ $t('button.add') }}
      </el-link>
      <div>
        <!--取消按钮-->
        <el-button size="mini" type="danger" @click="cancel">
          {{ $t('button.cancel') }}
        </el-button>
        <!--保存按钮-->
        <el-button :loading="isRequesting" size="mini" type="primary" @click="save">
          {{ $t('button.save') }}
        </el-button>
      </div>
    </div>

    <div class="bottom-table">
      <table>
        <tr align="center" class="title">
          <td rowspan="2">产品</td>
          <td rowspan="2">制程</td>
          <td colspan="6">油漆单价及配比</td>
          <td>油漆价格</td>
          <!-- 油漆用量 -->
          <td>油漆用量</td>
          <!-- 油漆费用 -->
          <td>油漆费用</td>
          <!-- 喷涂机台费率 -->
          <td>喷涂机台费率</td>
          <!-- 喷涂时间 -->
          <td>喷涂时间</td>
          <!-- 喷涂费用 -->
          <td>喷涂费用</td>
          <!-- 治具费用 -->
          <td>治具费用</td>
          <!-- 人力 -->
          <td>人力</td>
          <!-- 人力成本 -->
          <td>人力成本</td>
          <!-- 良率 -->
          <td>良率</td>
          <!-- 不良损耗费 -->
          <td>不良损耗费</td>
          <!-- 素材成本 -->
          <td>素材成本</td>
          <!-- 素材损耗费用 -->
          <td>素材损耗费用</td>
          <!-- 合计 -->
          <td>合计</td>
          <!-- 管销 -->
          <td>管销</td>
          <!-- 利润 -->
          <td>利润</td>
          <!-- 喷漆总价 -->
          <td>喷漆总价</td>
        </tr>
        <tr align="center" class="title">
          <!-- 油漆主剂($/kg) -->
          <td>油漆主剂($/kg)</td>
          <!-- 使用比例(w.t.) -->
          <td>使用比例(w.t.)</td>
          <!-- 稀释剂($/kg) -->
          <td>稀释剂($/kg)</td>
          <!-- 使用比例(w.t.) -->
          <td>使用比例(w.t.)</td>
          <!-- 固化剂($/kg) -->
          <td>固化剂($/kg)</td>
          <!-- 使用比例(w.t.) -->
          <td>使用比例(w.t.)</td>
          <!-- 油漆价格 -->
          <td>$/Kg</td>
          <!-- 油漆用量 -->
          <td>g/pcs</td>
          <!-- 油漆费用 -->
          <td>$</td>
          <!-- 喷涂机台费率 -->
          <td>$/Min</td>
          <!-- 喷涂时间 -->
          <td>S</td>
          <!-- 喷涂费用 -->
          <td>$</td>
          <!-- 治具费用 -->
          <td>$</td>
          <!-- 人力 -->
          <td>位</td>
          <!-- 人力成本 -->
          <td>$</td>
          <!-- 良率 -->
          <td>%</td>
          <!-- 不良损耗费 -->
          <td>$</td>
          <!-- 素材成本 -->
          <td>$</td>
          <!-- 素材损耗费用 -->
          <td>$</td>
          <!-- 合计 -->
          <td>$</td>
          <!-- 管销 -->
          <td>5%</td>
          <!-- 利润 -->
          <td>5%</td>
          <!-- 喷漆总价 -->
          <td>$</td>
        </tr>
        <template v-for="(item, index) in tableList">
          <tr :key="`${index}_0`" align="center">
            <!-- 产品 -->
            <td style="min-width: 200px">
              <el-input v-model="item.product" class="td-input"></el-input>
              <img class="delete-icon" :src="deleteIcon" @click="handlerDelete(index)" />
            </td>
            <!-- 制程 -->
            <td>
              <el-input v-model="item.process" class="td-input"></el-input>
            </td>
            <!-- 油漆主剂($/kg) -->
            <td>
              <el-input v-model="item.paint" class="td-input" type="number"></el-input>
            </td>
            <!-- 使用比例(w.t.) -->
            <td>
              <el-input v-model="item.paintPercent" class="td-input" type="number"></el-input>
            </td>
            <!-- 稀释剂($/kg) -->
            <td>
              <el-input v-model="item.thinner" class="td-input" type="number"></el-input>
            </td>
            <!-- 使用比例(w.t.) -->
            <td>
              <el-input v-model="item.thinnerPercent" class="td-input" type="number"></el-input>
            </td>
            <!-- 固化剂($/kg) -->
            <td>
              <el-input v-model="item.hardener" class="td-input" type="number"></el-input>
            </td>
            <!-- 使用比例(w.t.) -->
            <td>
              <el-input v-model="item.hardenerPercent" class="td-input" type="number"></el-input>
            </td>
            <!-- 油漆价格 -->
            <td>
              <el-input v-model="item.paintPrice" class="td-input" disabled></el-input>
            </td>
            <!-- 油漆用量 -->
            <td>
              <el-input v-model="item.paintCapacity" class="td-input" type="number"></el-input>
            </td>
            <!-- 油漆费用 -->
            <td>
              <el-input v-model="item.paintCost" class="td-input" disabled></el-input>
            </td>
            <!-- 喷涂机台费率	 -->
            <td>
              <el-input v-model="item.sprayingRate" class="td-input" type="number"></el-input>
            </td>
            <!-- 喷涂时间 -->
            <td>
              <el-input v-model="item.sprayingTime" class="td-input" type="number"></el-input>
            </td>
            <!-- 喷涂费用 -->
            <td>
              <el-input v-model="item.sprayingCost" class="td-input" disabled></el-input>
            </td>
            <!-- 治具费用 -->
            <td>
              <el-input v-model="item.fixtureCost" class="td-input" type="number"></el-input>
            </td>
            <!-- 人力 -->
            <td>
              <el-input v-model="item.laborNumbers" class="td-input" type="number"></el-input>
            </td>
            <!-- 人力成本 -->
            <td>
              <el-input v-model="item.laborCost" class="td-input" disabled></el-input>
            </td>
            <!-- 良率 -->
            <td>
              <el-input v-model="item.excellentRate" class="td-input" type="number"></el-input>
            </td>
            <!-- 不良损耗费 -->
            <td>
              <el-input v-model="item.badLossCost" class="td-input" disabled></el-input>
            </td>
            <!-- 素材成本 -->
            <td>
              <el-input v-model="item.materialCost" class="td-input" type="number"></el-input>
            </td>
            <!-- 素材损耗费用 -->
            <td>
              <el-input v-model="item.materialLossCost" class="td-input" disabled></el-input>
            </td>
            <!-- 合计 -->
            <td>
              <el-input v-model="item.totalCost" class="td-input" disabled></el-input>
            </td>
            <!-- 管销 -->
            <td>
              <el-input v-model="item.managementPrice" class="td-input" disabled></el-input>
            </td>
            <!-- 利润 -->
            <td>
              <el-input v-model="item.profit" class="td-input" disabled></el-input>
            </td>
            <!-- 喷漆总价 -->
            <td>
              <el-input v-model="item.sprayPaintCost" class="td-input" disabled></el-input>
            </td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PaintCapacity',

  props: {
    sprayPaint: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      isRequesting: false,

      deleteIcon: require('@/assets/icons/delete_red.png'),
      tableList: [
        {
          process: '底PU',
          paint: 13.97,
          paintPercent: 5,
          thinner: 3.68,
          thinnerPercent: 2,
          hardener: 12,
          hardenerPercent: 1,
          paintCapacity: 2.5,
          sprayingRate: 0.4,
          sprayingTime: 1.8,
          fixtureCost: 0,
          laborNumbers: 9,
          excellentRate: 95,
          materialCost: 0.043,
          product: ''
        }
      ]
    }
  },

  created() {
    const sourceData = this.$deepCopy(this.sprayPaint)
    if (sourceData.length > 0) {
      for (const item of this.sourceData) {
        item.excellentRate && (item.excellentRate = item.excellentRate * 100)
      }
      this.tableList = sourceData
    }
  },

  methods: {
    handlerClick() {
      this.tableList.push({})
    },

    async handlerDelete(index) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        this.tableList.splice(index, 1)
      } catch (error) {
        console.log(error)
      }
    },

    cancel() {
      this.$emit('cancel')
    },

    save() {
      const list = []
      this.tableList.forEach(item => {
        list.push({ ...item, excellentRate: item.excellentRate / 100 })
      })
      this.$emit('setPaintCapacity', list)
    }
  }
}
</script>
<style lang="scss" scoped>
.paint-capacity {
  height: 100%;
  overflow-x: auto;
  padding: 0 0 30px 0;
}

.top-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom-table {
  margin-top: 20px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 20px;
}

table {
  border-collapse: collapse;
}

td {
  min-width: 150px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #333;
  padding: 0 10px;
  word-wrap: break-word;
  word-break: normal;
  position: relative;
}

.title {
  font-weight: 600;
  background-color: #00b0f0;
}

.td-input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  /deep/.el-input__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    text-align: center;
  }
  /deep/.el-input__inner[disabled='disabled'] {
    background-color: #e0e0e0;
    color: red;
    font-weight: 700;
  }
}

.delete-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.td-result {
  color: red;
  font-weight: 700;
}
</style>
